<template>
    <div class="app">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>账号列表</span>
                </div>
            </template>
            <!-- 卡片的内容 -->
            <el-table ref="acclistRef" :data="tableData.acclist" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="账号" prop="account"></el-table-column>
                <el-table-column label="用户组" prop="userGroup"></el-table-column>
                <el-table-column label="创建时间" prop="ctime"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button size="small" @click="handleEdit(row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <br> -->
            <!-- 分页器 -->
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[1, 5, 10, 15]"
                layout="total, sizes, prev, pager, next, jumper" :total="totalNum" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            <!-- 按钮 -->
            <div style="margin-top: 20px">
                <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
                <el-button @click="handleCancelBatch">取消选择</el-button>
            </div>
            <!-- 弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="编辑账号">
                <el-form :model="editForm">
                    <el-form-item label="账号">
                        <el-input v-model="editForm.account" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="用户组">
                        <el-select v-model="editForm.userGroup" placeholder="请选择用户组">
                            <el-option label="超级管理员" value="超级管理员" />
                            <el-option label="普通管理员" value="普通管理员" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
// 引入api
import { acclist_api, accDelAll_api, accDel_api } from "../../api/apis.ts";
// 引入分页的hooks
import { usePagination } from "../../hooks/usePagination.ts";

// 解构分页的函数
let { totalNum,//总条数
    pageSize,//显示个数
    currentPage,//当前页
    handleCurrentChange,
    handleSizeChange } = usePagination(getData);

// 定义约束类型
interface TableItem {
    account: string;
    createTime: string;
    userGroup: string;
}
// 存放数据的数组-----------
const tableData = reactive<any>({
    acclist: [
        { account: 'admin1', userGroup: '超级管理员', createTime: '2023-07-01' },
    ]
});

const dialogFormVisible = ref(false);  // 显示弹窗

let editForm = ref({
    account: "",
    userGroup: ""
})  // 弹窗回填的数据

let ids: any = [];  // 选中后的ids的数组

// 加载页面就获取
// 封装一个获取数据的函数
async function getData() {
    let res = await acclist_api({
        pageSize: pageSize.value,
        currentPage: currentPage.value
    });
    // console.log(res);
    // 解构res，赋值
    let { total, data } = res.data
    totalNum.value = total;//总条数
    tableData.acclist = [...data]//具体数据
}
// 初始化调用函数
getData();

// 编辑操作----------------------
const handleEdit = (row: TableItem) => {
    // 显示弹窗
    dialogFormVisible.value = true;
    // 回填数据
    editForm.value = row;

};


// 删除操作---------------------
const handleDelete = async (row: any) => {
    // 
    console.log(row.id);
    // 删除数组里面这个数据
    let res = await accDel_api({ id: row.id })
    let { code } = res.data
    if (code == 0) {
        getData();
    }
};

// 点击单选或者全选都会触发的事件
let handleSelectionChange = (val: any) => {
    ids = val.map((item: any) => item.id);// 把所有id取出来
}
// 取消选择操作
let acclistRef = ref();
const handleCancelBatch = () => {
    acclistRef.value.clearSelection()
};
// 批量删除操作
const handleBatchDelete = async () => {
    await accDelAll_api({
        ids
    })
    getData();
};



</script>

<style scoped lang="scss">
.app {
    padding: 10px;
}

::v-deep .el-table {
    padding-bottom: 15px;
}
</style>